<template>
	<view :style="'width:'+width+'px;height:'+height+'px;margin:auto;'">
			<canvas class="canvas-progress" :style="'width:'+width+'px;height:'+height+'px;'" id="circularProgress" canvas-id="circularProgress">
				
			</canvas>
	</view>
</template>

<style scoped>
	
</style>

<script>
	export default {
		data(){
			return {
				
			}
		},
		props:{
			percent:{ //进度条进度
				type:Number,
				default:0
			},
			width:{ //进度条宽度
				type:Number,
				default:100
			},
			height:{ //进度条高度
				type:Number,
				default:100
			},
			lineWidth:{ //圆环宽度
				type:Number,
				default:10
			},
			bgColor:{ //进度环背景色
				type:String,
				default:'#e0e0e0'
			},
			progressColor:{ //进度环进度颜色
				type:String,
				default:'#00c296'
			},
			progressGradientColor:{ //进度渐变色，和progessColor一起使用
				type:String,
				default:''
			},
			fontShow:{ //是否显示文字进度提示，如:80%
				type:Boolean,
				default:true
			},
			fontSize:{ //进度环进度字体大小
				type:Number,
				default:13
			},
			fontColor:{ //进度环进度字体颜色
				type:String,
				default:'#00c296'
			}
		},
		watch:{
			percent(val){//进度数字
				this.draw(val);
			}
		},
		mounted() {
			this.draw(0);
		},
		methods:{
			//绘制圆
			draw(progress){
				let ctx = uni.createCanvasContext('circularProgress', this);
				 const width = this.width; // Canvas 宽度
				 const height = this.height; // Canvas 高度
				 const radius = this.width / 2; // 圆环半径
				 const lineWidth = this.lineWidth; // 圆环宽度
				 const centerX = width / 2; // 圆心 x 坐标
				 const centerY = height / 2; // 圆心 y 坐标
				 // 绘制背景圆环
				 ctx.beginPath();
				 ctx.arc(centerX, centerY, radius  - this.lineWidth, 0, 2 * Math.PI, false);
				 ctx.setStrokeStyle(this.bgColor); // 背景圆环颜色
				 ctx.setLineWidth(lineWidth);
				 ctx.stroke();
				 
				  // 创建渐变色
				    const gradient = ctx.createCircularGradient(0, 0, width,0);
				    gradient.addColorStop(0, this.progressColor); // 起始颜色（红色）
					if(this.progressGradientColor){
						gradient.addColorStop(1, this.progressGradientColor); // 结束颜色（蓝色）
					}
				 // 绘制进度圆环
				 const startAngle = -Math.PI / 2; // 起始角度，从顶部开始
				 const endAngle = startAngle + (2 * Math.PI * progress) / 100; // 结束角度
				 ctx.beginPath(); 
				 ctx.arc(centerX, centerY, radius  - this.lineWidth, startAngle, endAngle, false);
				 ctx.setStrokeStyle(gradient); // 设置渐变色
				 ctx.setLineWidth(lineWidth);
				  ctx.setLineCap('round'); // 设置圆环两端为圆角
				 ctx.stroke();
				 // 绘制进度文字
				 if(this.fontShow == true){
					 ctx.setFontSize(this.fontSize);
					 ctx.setFillStyle(this.fontColor);
					 ctx.setTextAlign('center');
					 ctx.setTextBaseline('middle');
					 ctx.fillText(`${progress}%`, centerX, centerY);
				 }
				
				//进度条到100%则出发end事件
				if(progress >= 100){
					this.$emit('end', {
						percent: progress + '%'
					});
				}
				
				
				 // 绘制
				 ctx.draw();
			}
		}
	}
</script>

